<template>
  <view class="editor-container">
    <!-- 顶部导航栏 -->
    <view class="editor-header">
      <view class="header-left">
        <u-icon name="arrow-left" size="24" @click="handleBack"></u-icon>
        <text class="ppt-title" @click="renamePPT">{{ pptStore.title }}</text>
      </view>
      <view class="header-right">
        <u-button size="mini" type="primary" @click="savePPT">保存</u-button>
      </view>
    </view>

    <!-- 主编辑区 -->
    <view class="editor-main">
      <!-- 左侧工具栏 -->
      <view class="tool-panel">
        <view class="tool-group">
          <u-icon name="list" size="24" @click="toggleSlidePanel"></u-icon>
          <u-icon name="text" size="24" @click="addTextElement"></u-icon>
          <u-icon name="photo" size="24" @click="addImageElement"></u-icon>
          <u-icon name="shape" size="24" @click="addShapeElement"></u-icon>
        </view>
        <view class="tool-group">
          <u-icon name="undo" size="24" @click="undo"></u-icon>
          <u-icon name="redo" size="24" @click="redo"></u-icon>
          <u-icon name="delete" size="24" @click="deleteSelected"></u-icon>
        </view>
      </view>

      <!-- 画布区域 -->
      <view class="canvas-area">
        <canvas-board 
          :slide="currentSlide"
          @select="handleSelectElement">
        </canvas-board>
      </view>

      <!-- 右侧属性面板 -->
      <view class="property-panel" v-if="selectedElement">
        <element-properties 
          :element="selectedElement"
          @update="updateElement">
        </element-properties>
      </view>
    </view>

    <!-- 底部幻灯片管理 -->
    <view class="slide-panel" v-if="showSlidePanel">
      <scroll-view scroll-x class="slide-scroll">
        <view 
          v-for="(slide, index) in pptStore.slides" 
          :key="index"
          class="slide-thumbnail"
          :class="{ active: currentSlideIndex === index }"
          @click="switchSlide(index)">
          <view class="slide-number">{{ index + 1 }}</view>
          <view class="slide-content">
            <!-- 这里可以渲染缩略图 -->
          </view>
          <u-icon 
            name="close" 
            size="16" 
            class="delete-slide"
            @click.stop="removeSlide(index)">
          </u-icon>
        </view>
        <view class="add-slide" @click="addSlide">
          <u-icon name="plus" size="24"></u-icon>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { usePPTStore } from '@/stores/ppt'

const pptStore = usePPTStore()
const showSlidePanel = ref(true)
const currentSlideIndex = ref(0)
const selectedElement = ref(null)

// 计算当前幻灯片
const currentSlide = computed(() => {
  return pptStore.slides[currentSlideIndex.value]
})

// 初始化PPT数据
onMounted(() => {
  if (!pptStore.currentPPT) {
    pptStore.initNewPPT()
  }
})

// 返回上一页
function handleBack() {
  uni.navigateBack()
}

// 保存PPT
async function savePPT() {
  try {
    await pptStore.savePPT()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '保存失败',
      icon: 'none'
    })
  }
}

// 重命名PPT
function renamePPT() {
  uni.showModal({
    title: '重命名',
    content: '请输入新的演示文稿名称',
    editable: true,
    placeholderText: pptStore.title,
    success: async (res) => {
      if (res.confirm && res.content) {
        pptStore.currentPPT.title = res.content
        await savePPT()
      }
    }
  })
}

// 切换幻灯片面板
function toggleSlidePanel() {
  showSlidePanel.value = !showSlidePanel.value
}

// 添加文本元素
function addTextElement() {
  const newElement = {
    type: 'text',
    content: '双击编辑文本',
    fontSize: 16,
    color: '#000000',
    x: 100,
    y: 100,
    width: 200,
    height: 40
  }
  pptStore.slides[currentSlideIndex.value].elements.push(newElement)
  selectedElement.value = newElement
}

// 添加图片元素
function addImageElement() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const newElement = {
        type: 'image',
        src: res.tempFilePaths[0],
        x: 100,
        y: 100,
        width: 200,
        height: 150
      }
      pptStore.slides[currentSlideIndex.value].elements.push(newElement)
      selectedElement.value = newElement
    }
  })
}

// 添加形状元素
function addShapeElement() {
  const newElement = {
    type: 'rect',
    fill: '#1890ff',
    x: 100,
    y: 100,
    width: 150,
    height: 100
  }
  pptStore.slides[currentSlideIndex.value].elements.push(newElement)
  selectedElement.value = newElement
}

// 选择元素
function handleSelectElement(element) {
  selectedElement.value = element
}

// 更新元素属性
function updateElement(updatedProps) {
  if (!selectedElement.value) return
  
  Object.assign(selectedElement.value, updatedProps)
}

// 删除选中元素
function deleteSelected() {
  if (!selectedElement.value) return
  
  const elements = pptStore.slides[currentSlideIndex.value].elements
  const index = elements.indexOf(selectedElement.value)
  if (index !== -1) {
    elements.splice(index, 1)
    selectedElement.value = null
  }
}

// 切换幻灯片
function switchSlide(index) {
  currentSlideIndex.value = index
  selectedElement.value = null
}

// 添加幻灯片
function addSlide() {
  pptStore.addSlide()
  currentSlideIndex.value = pptStore.slides.length - 1
}

// 删除幻灯片
function removeSlide(index) {
  if (pptStore.slides.length <= 1) {
    uni.showToast({
      title: '至少保留一张幻灯片',
      icon: 'none'
    })
    return
  }
  
  pptStore.removeSlide(index)
  if (currentSlideIndex.value >= index) {
    currentSlideIndex.value = Math.max(0, currentSlideIndex.value - 1)
  }
}

// 撤销
function undo() {
  // 实现撤销逻辑
}

// 重做
function redo() {
  // 实现重做逻辑
}
</script>

<style lang="scss" scoped>
.editor-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.editor-header {
  height: 80rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .u-icon {
      margin-right: 20rpx;
    }
    
    .ppt-title {
      font-size: 32rpx;
      font-weight: bold;
      max-width: 400rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.editor-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.tool-panel {
  width: 80rpx;
  background-color: #fff;
  border-right: 1rpx solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 20rpx;
  
  .tool-group {
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .u-icon {
      margin-bottom: 30rpx;
      padding: 10rpx;
      border-radius: 8rpx;
      
      &:active {
        background-color: #f0f0f0;
      }
    }
  }
}

.canvas-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  overflow: auto;
}

.property-panel {
  width: 300rpx;
  background-color: #fff;
  border-left: 1rpx solid #eee;
  overflow-y: auto;
}

.slide-panel {
  height: 180rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  padding: 10rpx 0;
}

.slide-scroll {
  height: 100%;
  white-space: nowrap;
}

.slide-thumbnail {
  width: 120rpx;
  height: 80rpx;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
  background-color: #f9f9f9;
  border-radius: 4rpx;
  position: relative;
  
  &.active {
    border: 2rpx solid #1890ff;
  }
  
  .slide-number {
    position: absolute;
    top: 4rpx;
    left: 4rpx;
    font-size: 20rpx;
    color: #999;
  }
  
  .slide-content {
    width: 100%;
    height: 100%;
  }
  
  .delete-slide {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    padding: 4rpx;
  }
}

.add-slide {
  width: 120rpx;
  height: 80rpx;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 4rpx;
  margin-left: 10rpx;
  
  .u-icon {
    color: #999;
  }
}
</style>